<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout">
        <a-input
          type="hidden"
          v-decorator="[
            'id',
            {
              initialValue: formInfo.id
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="项目名称">
        <a-input
          v-decorator="[
            'project_name',
            {
              initialValue: formInfo.project_name,
              rules: [{ required: true, message: '请输入项目名称' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="申请金额">
        <a-input-number
          style="width: 100%"
          step="10000"
          :min="0"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          v-decorator="[
            'target_code',
            {
              initialValue: formInfo.target_code,
              rules: [{ required: true, message: '请输入申请金额' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="拟定上线平台/院线/场地">
        <a-input
          v-decorator="[
            'platform',
            {
              initialValue: formInfo.platform
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="联合投资">
        <a-input
          v-decorator="[
            'joint_venture',
            {
              initialValue: formInfo.joint_venture
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="联合出品方">
        <a-input
          v-decorator="[
            'joint_investment',
            {
              initialValue: formInfo.joint_investment
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="上映周期">
        <a-input
          v-decorator="[
            'release_cycle',
            {
              initialValue: formInfo.release_cycle
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="项目基本情况">
        <a-textarea
          v-decorator="[
            'project_detail',
            {
              initialValue: formInfo.project_detail
            }
          ]"
        ></a-textarea>
      </a-form-item>
      <!--      <a-form-item-->
      <!--        v-bind="formItemLayout"-->
      <!--        label="结算银行账号"-->
      <!--        extra="后期签订合同需与此一致,涉及后期项目结算,请谨慎选择"-->
      <!--      >-->
      <!--        <a-select-->
      <!--          v-decorator="[-->
      <!--            'bank_id',-->
      <!--            {-->
      <!--              initialValue: formInfo.bank_id,-->
      <!--              rules: [{ required: true, message: '请选择结算银行账号' }]-->
      <!--            }-->
      <!--          ]"-->
      <!--        >-->
      <!--          <a-select-option-->
      <!--            :value="item.id"-->
      <!--            v-for="(item, index) in cardList"-->
      <!--            :key="index"-->
      <!--          >-->
      <!--            <img-->
      <!--              :src="getImg(item.bank_name)"-->
      <!--              width="20px"-->
      <!--              alt=""-->
      <!--              style="vertical-align: middle;margin-right: 0.3rem"-->
      <!--            />{{ item.bank_name }}&nbsp;&nbsp;{{-->
      <!--              item.bank_num-->
      <!--            }}</a-select-option-->
      <!--          >-->
      <!--        </a-select>-->
      <!--      </a-form-item>-->
      <a-form-item v-bind="formItemLayout" label="添加附件">
        <a-upload
          v-decorator="[
            'fujian',
            {
              initialValue: formInfo.fileList,
              valuePropName: 'fileList',
              getValueFromEvent: normFile,
              rules: [{ required: true, message: '请添加附件' }]
            }
          ]"
          name="file"
          :headers="headers"
          :action="$api.uploadFile"
        >
          <a-button> <a-icon type="upload" /> 上传附件 </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          class="submit-btn"
          type="primary"
          html-type="submit"
          size="large"
        >
          提交审核
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { Upload, InputNumber } from "ant-design-vue";
import bankList from "@/lib/bank";
import "@/assets/fonticon/iconfont.css";
export default {
  components: {
    aUpload: Upload,
    aInputNumber: InputNumber
  },
  data() {
    return {
      bankList,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      },
      cardList: [],
      headers: {
        token: this.$crypto.getAES(localStorage.getItem("ctoken"))
      },
      formInfo: {
        fileList: []
      },
      id: null
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    getImg(name) {
      let bankInfo = this.bankList.find(value => {
        if (value.name === name) {
          return value;
        }
      });
      return bankInfo.img;
    },
    getCardList() {
      this.$ajax
        .post(this.$api.getCardList)
        .then(res => {
          this.cardList = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let params = JSON.parse(JSON.stringify(values));
          delete params.fujian;
          let api =
            this.$route.name === "editProject"
              ? this.$api.editProject
              : this.$api.addProject;
          let msg =
            this.$route.name === "editProject" ? "编辑成功" : "新增成功";
          this.$ajax
            .post(api, params)
            .then(() => {
              this.$message.success(msg);
              this.$router.push({ name: "projectList" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    getDetail() {
      let obj = {
        id: this.id
      };
      this.$ajax
        .post(this.$api.detailProject, obj)
        .then(res => {
          if (res.data.projectInfo.status !== 3) {
            this.$router.push({ name: "projectList" });
            this.$message.warning("此项目不允许编辑");
          } else {
            Object.assign(this.formInfo, res.data.projectInfo);
            this.formInfo.fileList.push({
              uid: "2",
              name: "附件",
              status: "done",
              url: this.$api.imgUrl + this.formInfo.appendix
            });
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      if (e.fileList.length === 2) {
        e.fileList.splice(0, 1);
      }
      return e && e.fileList;
    }
  },
  created() {
    this.getCardList();
    if (this.$route.name === "editProject") {
      this.id = this.$route.params.id;
      this.getDetail();
    }
  }
};
</script>

<style scoped lang="less">
.iconfont {
  font-size: 20px;
}
</style>
